﻿<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-row :gutter="10">
        <a-form layout="inline">          
          <a-col :md="8" :sm="24">
            <!-- <a-form-item> -->
              <el-radio-group v-model="dateType" size="small">
                <el-radio-button label="单据"></el-radio-button>
                <el-radio-button label="开票"></el-radio-button>
              </el-radio-group>
              <a-range-picker v-model="queryParam.rangeData" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            <!-- </a-form-item> -->
            
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="客户简称">
              <a-input v-model="queryParam.Customer"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="业务员">
              <a-input v-model="queryParam.Saler"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-button style="margin-left: 10px;" type="primary" @click="() => {
              this.pagination.current = 1;
              this.getDataList();
            }
              ">查询</a-button>
            <a-button style="margin:0 8px" @click="repossess">重置</a-button>
            <a-button type="primary" icon="download" @click="downloadTemplate">导出</a-button>
            <a-select allowClear ref="select" v-model:value="queryParam.selectType" placeholder="发票状态"
              style="width: 120px;margin-left: 8px;" @change="getDataList()">
              <a-select-option value="1">已开票</a-select-option>
              <a-select-option value="0">未开票</a-select-option>
            </a-select>
          </a-col>
        </a-form>
      </a-row>
    </div>

    <a-table ref="table" :scroll="{ y: 530, x: 2550 }" :columns="columns" :rowKey="(row, index) => row.Id"
      :dataSource="data" :pagination="pagination" :loading="loading" @change="handleTableChange" :bordered="true"
      size="small">
      <span slot="Type" slot-scope="text, record">
        <template>
          <a-tag :color="text == '已开票' ? 'blue' : 'orange'">
            {{ text }}
          </a-tag>
        </template>
      </span>
    </a-table>
    <a-modal title="导出" :visible="showDownload" @ok="handleOk" :footer="null"
      @cancel="() => { step = 0, showDownload = false }">
      <div style="display: flex;align-items:center;flex-direction: column;">
        <p>总行数:{{pagination.total}}，每张表5000行，共{{ allTotal }}个表</p>
        <a-spin v-show="step !=100" />
        <a-progress :percent="step" />
        <p v-show="step==100" style="font-size: 20px;font-weight: 600;margin: 20px 0;">完成！</p>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import moment from 'moment'

export default {
  mounted() {
    this.getDataList()
  },
  data() {
    return {
      dateType:'单据',
      data: [],
      step: 0,
      allTotal:0,
      showDownload: false,
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      sorter: { field: 'dDate', order: 'desc' },
      loading: false,
      columns: [
        { title: '单据编号', dataIndex: 'code', width: '150px', fixed: 'left', align: 'center' },
        {
          title: '单据日期',
          dataIndex: 'madedate',
          width: '150px',
          fixed: 'left',
          align: 'center',
          customRender: (value) => {
            if (value) {
              return value.substring(0, 10)
            }
          }
        },
        { title: '发票号码', dataIndex: 'Invoicenumber', width: '150px', fixed: 'left', align: 'center' },
        { title: '发票类型', dataIndex: 'invoiceType', width: '150px', fixed: 'left', align: 'center' },
        { title: '客户简称', dataIndex: 'Customer', width: '300px' },
        { title: '业务员', dataIndex: 'Saler', width: '100px', align: 'center' },
        { title: '发货日期', dataIndex: 'SendDate', width: '150px', align: 'center', scopedSlots: { customRender: 'SendDate' }, },
        { title: '开票日期', dataIndex: 'UpdateTime', width: '150px', align: 'center', scopedSlots: { customRender: 'UpdateTime' }, },
        { title: '制单人', dataIndex: 'maker', width: '100px', align: 'center' },
        { title: '审核人', dataIndex: 'auditor', width: '100px', align: 'center' },
        { title: '存货名称', dataIndex: 'cInvName', width: '150px' },
        { title: '规格', dataIndex: 'cInvStd', width: '150px' },
        { title: '单位', dataIndex: 'GroupName', align: 'right', width: '150px', align: 'center' },
        {
          title: '数量',
          dataIndex: 'Quantity',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return Number(value).toFixed(4)
            }
          }
        },
        { title: '批号', dataIndex: 'Batch', width: '150px', align: 'center' },
        {
          title: '单价',
          dataIndex: 'iInvRCost',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return Number(value).toFixed(2)
            }
          }
        },
        {
          title: '金额',
          dataIndex: 'SumiInvRCost',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return this.$options.filters.NumberFormats(value)
            }
          }
        },
        {
          title: '税额',
          dataIndex: 'TaxAmount',
          align: 'right',
          width: '150px',
          customRender: (value) => {
            if (value) {
              return Number(value).toFixed(2)
            }
          }
        },
        {
          title: '税率%', dataIndex: 'TaxRate', align: 'right', width: '150px',
          customRender: (value) => {
            if (value) {
              return (Number(value).toFixed(2) * 100) + '%'
            }
          }
        },
        // {
        //   title: '含税总金额',
        //   dataIndex: 'InvoicingAmount',
        //   align: 'right',
        //   width: '150px',
        //   scopedSlots: { customRender: 'InvoicingAmount' }
        // },
        { title: '单据状态', dataIndex: 'Type', width: '150px', align: 'center', scopedSlots: { customRender: 'Type' }, },
        { title: '低开金额', dataIndex: 'InventoryAmount', width: '150px', align: 'center', scopedSlots: { customRender: 'InventoryAmount' }, 
          customRender: (value) => {
            if (value) {
              return this.$options.filters.NumberFormats(value)
            }
          }
        }
      ],
      queryParam: {
        rangeData: [
          moment().startOf('months').format('YYYY-MM-DD'),
          moment().endOf('months').format('YYYY-MM-DD')
        ]
      }
    }
  },
  methods: {
    repossess() {
      this.queryParam = {}
      this.getDataList()
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }

      this.getDataList()
    },
    getDataList() {
      this.loading = true
      this.queryParam.DateType=this.dateType
      this.$http
        .post('/InvoiceManagement/ST_RDRecord_b/GetAccountForSaleList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.SortField,
          SortType: this.sorter.SortType,
          Search: this.queryParam
        })
        .then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.data = resJson.Data
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          } else {
            this.data = []
            this.$message.error(resJson.Msg)
          }
        })
    },
    //导出
    async downloadTemplate() {
      this.showDownload = true;
      let count = Math.ceil(this.pagination.total / 5000);
      let step = Math.ceil(100 / count);
      this.allTotal = step;
      for (let i = 1; i <= count; i++) {
        await this.$http.post('/InvoiceManagement/ST_RDRecord_b/Export', {
          "PageIndex": i,
          "PageRows": 5000,
          Search: this.queryParam
        }, { responseType: 'blob' }).then(res => {
          const url = URL.createObjectURL(res)
          // console.log(url)
          const fileName = '销售明细表'
          const aTag = document.createElement('a')
          aTag.download = fileName
          aTag.href = url
          aTag.click()
          URL.revokeObjectURL(aTag.href)
        }).catch(err => {
          this.$message.error(err);
        })
        this.step = step * i;
      }
      this.step = 100;
    },
    timeFormat(val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD HH:mm')
    }

  }
}
</script>
<style lang="less" scoped>
/deep/.ant-table-thead th {
  text-align: center !important;
}
</style>
